<template>
  <div class="article">
    <van-nav-bar
      title="文章详情"
      left-arrow
      @click-left="$router.back()"
      fixed
      placeholder
    />
    <!-- @click="$router.back()" 返回上一页 -->
    <main>
      <h3>{{ text }}</h3>
      <van-skeleton v-if="!data" title :row="3" />
      <div v-else>
        <div class="top">
          <ul class="top-ul">
            <li>
              <van-image
                width="40px"
                height="40px"
                fit="cover"
                round
                :src="data.avatar"
              />
            </li>
            <li>
              <span>{{ data.nickname }}</span>
              <span>{{
                format(data.time || 1658220173534, "yyyy-MM-dd HH:mm:ss")
              }}</span>
            </li>
            <li>
              <svg
                v-if="!data.is_fav"
                @click="collect('/api/add_fav', data.is_fav)"
                class="tt-icon sc-icon"
                aria-hidden="true"
              >
                <use xlink:href="#icon-shoucang"></use>
              </svg>
              <!-- 点击收藏 -->
              <svg
                v-else
                @click="collect('/api/remove_fav', data.is_fav)"
                class="tt-icon sc-icon"
                aria-hidden="true"
              >
                <use xlink:href="#icon-shoucanglan"></use>
              </svg>
            </li>
          </ul>
        </div>
        <div class="article">
          <ul class="main-ul">
            <li
              v-for="(item, index) in images"
              :key="index"
              @click="infoaaa(index)"
            >
              <van-image
                :class="images.length === 1 ? 'one' : 'three'"
                fit="cover"
                :src="item"
              />
            </li>
          </ul>
          <p>{{ data.content }}</p>
        </div>
        <van-empty
          v-show="evaluate.length == 0"
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="快来评论第一条吧"
        />
        <div class="comm" v-show="evaluate">
          <ul class="comm-ul" v-for="(item, index) in evaluate" :key="item._id">
            <li>
              <van-image
                width="40px"
                height="40px"
                fit="cover"
                round
                :src="item.info.avatar"
              />
            </li>

            <li>
              <span>{{ item.info.nickname }}</span>
              <p>{{ item.content }}</p>
              <!-- 评论的回复 -->
              <div class="reply">
                <!-- <em>3回复</em> -->
                <van-cell class="hf"
                  :title="
                    item.reply_num == 0 ? '暂无回复' : item.reply_num + ' 回复'
                  "
                  @click="onSelect(item, item._id)"
                />

                <van-action-sheet v-model="show" title="评论">
                  <div class="content">
                    <ul
                      class="comm-ul"
                      v-for="item2 in onecomm"
                      :key="item2._id"
                    >
                      <!-- {{item2}} -->
                      <li>
                        <van-image
                          width="40px"
                          height="40px"
                          fit="cover"
                          round
                          :src="item2.info.avatar"
                        />
                      </li>

                      <li>
                        <span>{{ item2.info.nickname }}</span>
                        <p>{{ item2.content }}</p>
                        <span>{{
                          format(item2.create_time, "yyyy-MM-dd HH:mm:ss")
                        }}</span>
                      </li>

                      <li>👍{{ item2.like_count }}</li>
                    </ul>
                    <div class="content2">
                      <ul
                        class="comm-ul"
                        v-for="item in tolist"
                        :key="item._id"
                      >
                        <li>
                          <van-image
                            width="40px"
                            height="40px"
                            fit="cover"
                            round
                            :src="item.info.avatar"
                          />
                        </li>

                        <li>
                          <span>{{ item.info.nickname }}</span>
                          <p>{{ item.content }}</p>
                          <span>{{
                            format(item.create_time, "yyyy-MM-dd HH:mm:ss")
                          }}</span>
                        </li>

                        <li>👍{{ item.like_count }}</li>
                      </ul>
                    </div>
                    <!-- 评论的底部回复栏 -->
                    <div class="comment">
                      <ul>
                        <li>
                          <input
                            type="text"
                            v-model="comment"
                            placeholder="请输入评论"
                          />
                        </li>
                        <li>
                          <button @click="getcomment(1)">回复</button>
                        </li>
                        <li>
                          <svg
                            v-if="checked"
                            @click="like('/api/like', checked)"
                            class="tt-icon"
                            aria-hidden="true"
                          >
                            <use xlink:href="#icon-icon"></use>
                          </svg>
                          <svg
                            v-else
                            @click="like('/api/unlike', checked)"
                            class="tt-icon"
                            aria-hidden="true"
                          >
                            <use xlink:href="#icon-dianzan"></use>
                          </svg>
                        </li>
                        <li>
                          <svg class="tt-icon" aria-hidden="true">
                            <use xlink:href="#icon-zhuanfa"></use>
                          </svg>
                        </li>
                      </ul>
                    </div>
                  </div>
                </van-action-sheet>
              </div>
              <span>{{ format(item.create_time, "yyyy-MM-dd HH:mm:ss") }}</span>
            </li>
            <li>
              <svg
                @click="comments(item.is_like, item._id, index)"
                class="tt-icon"
                aria-hidden="true"
              >
                <use
                  :class="evaluate[index].is_like ? 'islike' : ''"
                  xlink:href="#icon-icon"
                ></use>
              </svg>
              {{ evaluate[index].like_count }}
              <!-- {{ item.is_like }} -->
            </li>
          </ul>
        </div>
      </div>
    </main>
    <!-- 底部评论栏 -->
    <div class="comment">
      <ul>
        <li>
          <input type="text" v-model="comment" placeholder="评论" />
        </li>
        <li>
          <button @click="getcomment(0)">回复</button>
        </li>
        <li>
          <svg
            v-if="!data.is_like"
            @click="like('/api/like', data.is_like)"
            class="tt-icon"
            aria-hidden="true"
          >
            <use xlink:href="#icon-icon"></use>
          </svg>
          <svg
            v-else
            @click="like('/api/unlike', data.is_like)"
            class="tt-icon"
            aria-hidden="true"
          >
            <use xlink:href="#icon-dianzan"></use>
          </svg>
        </li>
        <li>
          <svg class="tt-icon" aria-hidden="true" >
            <use xlink:href="#icon-zhuanfa"></use>
          </svg>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Image as VanImage } from "vant";
import { Field } from "vant";
import { format } from "date-fns";
import { Cell, CellGroup } from "vant";
import { ActionSheet } from "vant";
import { Toast, Empty } from "vant";
import { ImagePreview, Skeleton,ShareSheet } from "vant";
export default {
  name: "WorkspaceJsonArticle",
  components: {
    [VanImage.name]: VanImage,
    [Field.name]: Field,
    [Cell.name]: Cell,
    [Empty.name]: Empty,
    [CellGroup.name]: CellGroup,
    [ActionSheet.name]: ActionSheet,
    [Skeleton.name]: Skeleton,
    [ShareSheet.name]: ShareSheet,
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  data() {
    return {
        showShare: false,
      data: "",
      checked: true,
      evaluate: [],
      comment: "",
      collected: true,
      format,
      show: false,
      tolist: {},
      onecomm: {},
      images: [],
      item: "",
      plid: "",
      judge: false,
    };
  },
  created() {
    this.getartice();
    this.getevaluate();
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    text() {
      return this.$route.query.text;
    },
  },
  methods: {
    // 返回上一级
    onClickLeft() {
      this.$router.go(-1);
    },
    // 获取文章详情
    getartice() {
      let user_id = localStorage.getItem("uid");
      this.$http
        .post("/api/get_article_detail", {
          article_id: this.id,
          user_id,
        })
        .then((res) => {
          // console.log(res);
          this.data = res.data;
          console.log(this.data);
          this.images = res.data.imageSrc;
          console.log(this.images);
        })
        .catch((err) => {
          //错误处理
          console.log(err);
        });
    },
    // 获取评价
    getevaluate() {
      let user_id = localStorage.getItem("uid");
      this.$http
        .post("/api/get_comment_list", {
          article_id: this.id,
          skip: "0",
          limit: "0",
          user_id: user_id || "",
        })
        .then((res) => {
          console.log(res);
           this.loading = res.count;
          this.evaluate = res.data;
          console.log(this.evaluate);
           this.evaluatelog = false;
        });
    },
    // 获取回复列表
    onSelect(item, id) {
      this.show = true;
      console.log(item, id);
      this.plid = id;
      this.item = item;
      let user_id = localStorage.getItem("uid");
      this.$http
        .post("/api/get_reply_list", {
          article_id: this.id,
          skip: "0",
          limit: "0",
          reply_comment_id: id,
          user_id: user_id,
        })
        .then((res) => {
          console.log(res);
          this.tolist = res.data;
        });
      if (this.show) {
        this.onecomm = [];
      }
      this.onecomm.push(item);
      console.log(item);
    },
    // 点赞文章
    like(url, tf) {
      console.log(tf);
      this.user_id = localStorage.getItem("uid");
      this.$http
        .post(url, {
          article_id: this.id,
          user_id: this.user_id,
        })
        .then((res) => {
          console.log(res);
          this.$toast(res.msg);
          this.data.is_like = !tf;
        });
    },
    // 收藏
    collect(url, is_fav) {
      this.user_id = localStorage.getItem("uid");
      this.$http
        .post(url, {
          article_id: this.id,
          user_id: this.user_id,
        })
        .then((res) => {
          console.log(res);
          this.$toast.success(res.msg);
          this.data.is_fav = !is_fav;
        });
    },
    // 评论
    getcomment(i) {
      // if()
      if (this.comment == "") {
        console.log(111);
      } else {
        let user_id = localStorage.getItem("uid");
        console.log(user_id);
        this.$http
          .post("/api/add_comment", {
            user_id: user_id,
            article_id: this.id,
            comment_type: i,
            reply_comment_id: this.plid,
            content: this.comment,
          })
          .then((res) => {
            // 更新评论
            if (i) {
              if (res.code == 0) {
                console.log(res);
                this.$toast.success(res.msg);
                this.onSelect(this.item, this.plid);
                this.getevaluate();
                this.comment = "";
              }
            } else {
              if (res.code == 0) {
                console.log(res);
                this.$toast.success(res.msg);
                this.getevaluate();
                this.comment = "";
              }
            }
          });
      }
    },
    // 评论点赞
    comments(is_like, id, index) {
      console.log(is_like, id, index);
      if (!is_like) {
        let user_id = localStorage.getItem("uid");
        this.$http
          .post("/api/comment_like", {
            user_id,
            comment_id: id,
          })
          .then((res) => {
            console.log(res);
            if (res.code == 0) {
              this.evaluate[index].is_like = true;
              this.evaluate[index].like_count += 1;
              this.$toast(res.msg);
            }
          });
      } else {
        let user_id = localStorage.getItem("uid");
        this.$http
          .post("/api/comment_unlike", {
            user_id,
            comment_id: id,
          })
          .then((res) => {
            console.log(res);
            if (res.code == 0) {
              this.evaluate[index].is_like = false;
              this.evaluate[index].like_count -= 1;
              this.$toast(res.msg);
            }
          });
      }
    },
    // 预览图片
    infoaaa(index) {
      ImagePreview({
        images: this.images,
        startPosition: index,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.islike {
  color: red;
}
main {
  padding: 0 15px;
  h1 {
    padding: 30px 0;
  }
  .top-ul {
    display: flex;
    li:nth-child(1) {
      width: 50px;
      img {
        width: 100%;
      }
    }
    li:nth-child(2) {
      span {
        display: block;
      }
      flex: 1;
      margin-top: -4px;
    }
    li {
      .sc-icon {
        font-size: 27px;
        padding-right: 5px;
      }
      span {
        margin: 3px 0;
      }
      img {
        margin-top: 6px;
      }
    }
    padding-bottom: 10px;
    // border-bottom: 1px solid #eee;
  }
  .article {
    padding-top: 10px;
    border-bottom: 1px solid #ccc;
    p {
      // text-indent: 2em;
      margin-top: 5px;
      line-height: 26px;
      font-size: 17px;
      color: #333333;
      margin-top: 10px;
    }
    .main-ul {
      display: flex;
      flex-wrap: wrap;
      .one {
        width: 93vw;
        height: 93vw;
        img {
          width: 95vw;
          height: 95vw;
        }
      }
      .three {
        width: 30vw;
        height: 28vw;
      }
      li {
        width: 33%;
        img {
          width: 100%;
        }
      }
    }
  }
  .comm {
    margin-bottom: 18vw;

    margin-top: 30px;
    .comm-ul {
      padding-top: 7px;
      display: flex;
      li:nth-child(1) {
        width: 50px;
        img {
          width: 100%;
        }
      }
      li:nth-child(2) {
        padding-left: 3px;
        span {
          display: block;
          em {
            border: 1px solid #ccc;
            padding: 5px;
            border-radius: 36px;
            margin-right: 10px;
          }
        }
        span:nth-child(1) {
          
          font-size: 12px;
          font-weight: 400;
          color: #222;
        }
        p {
          font-size: 16px;
          margin: 5px 0;
        }
        flex: 1;
      }
      li {
        button {
          border-radius: 36px;
          background-color: #fff;
          border: 1px solid #ccc;
          padding: 5px;
        }
        .reply {
          ::v-deep .van-overlay {
            background-color: rgba(0, 0, 0, 0.1);
          }
          .content {
            // background-color: #ccc;
            .comment {
              li:nth-child(1) {
                flex: 1;
                width: 11vw;
              }
              li:nth-child(2) {
                flex: none;
              }
            }
            height: 80vh;
            .comm-ul {
              background-color: #fff;
              padding: 8px 15px;
            }
            .content2 {
              margin-top: 12px;
              padding-bottom: 15vw;
            }
          }
        }
      }
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
    }
  }
}
.comment {
  height: 45px;
  position: absolute;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #ccc;
  width: 100%;
  background-color: #fff;
  ul {
    display: flex;
    li:nth-child(1) {
      margin-top: 5px;
      margin-left: 10px;
      input {
        width: 45vw;
        height: 7vw;
        outline: none;
        border: 1px solid #ccc;
        border-radius: 16px;
        padding-left: 30px;
        padding-top: 1vw;
      }
      width: 60vw;
    }
    li {
      width: 13vw;
      .tt-icon {
        font-size: 23px;
        margin-top: 3.4vw;
        margin-left: 10px;
      }
      button {
        padding: 4px;
        font-size: 14px;
        color: #444;
        margin-top: 9px;
        border-radius: 11px;
        margin-right: 4px;
        border: 1px solid #ccc;
        background-color: #fff;
      }
    }
  }
}
.hf{
  border: 1px solid #eee;
      border: 1px solid #eee;
    width: 21.66667vw;
    height: 30px;
    border-radius: 17px;
    line-height: 10px;
    margin-bottom: 10px;
}
</style>